<template>
    <view class="globe_back">
        <view class="box">
            <u-search placeholder="搜索店铺内的商品" v-model="keyword" @search="search" :showAction="false" bgColor="#ffffff"></u-search>
            <view class="flex justify_content_between store">
                <view class="flex">
                    <image class="storeImg" :src="store_list.avatar" mode=""></image>
                    <view>
                        <view class="storeTitle">{{store_list.trade_name}}</view>
                        <view class="salesVolume">
                            月销{{store_list.num}}
                            <u-rate :count="count" v-model="store_list.star" readonly active-color="#FF6401" inactive-color="#F7F7F7" size="16" gutter="2"></u-rate>
                        </view>
                    </view>
                </view>
                <view>
                    <image class="address" src="@/static/imgs/icon_dpdz.png" mode=""></image>
                    <text class="addressText">{{store_list.address}}</text>
                </view>
            </view>
            <!-- 商品列表 -->
            <view class="listBox flex flex_wrap">
                <view class="list" v-for="(item,index) in product_list" @click="bay(item.id)">
                    <image class="comimng" :src="item.goods_image" mode="widthFix"></image>
                    <view class="title">{{ item.name}}</view>
                    <view class="flex justify_content_between">
                        <view class="money">
                            ￥
                            <text class="moneyN">{{ item.retail_price }}</text>
                        </view>
                        <view class="cost">月销{{item.sales}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            keyword: '',
            count: 5,
            value: 5,
            list: [
                {
                    img: '@/static/imgs/cqt.png',
                    title: '雅迪电动车',
                    money: '2000',
                    sales: '8885'
                },
                {
                    img: '@/static/imgs/cqt.png',
                    title: '小牛电动车小牛电动车小牛电动车',
                    money: '1200',
                    sales: '12'
                },
                {
                    img: '@/static/imgs/cqt.png',
                    title: '小牛电动车',
                    money: '1200',
                    sales: '999'
                }
            ],
			id:0,
			store_list:'',
			product_list:'',
			page:1,
			pagesize:10,
			status:'nomore',
			searchs:''
        };
    },
	onLoad(e) {
		if(e.store_id){
			this.id=e.store_id
			console.log(this.id)
		}
		this.store()
		this.product(1)
	},
	onReachBottom() {
	
	  if (this.page * this.pagesize > this.product_list.length) return;
	  this.status = "loading";
	  this.page = ++this.page;
	  setTimeout(() => {
	    this.product(2);
	    if (this.page * this.pagesize > this.product_list.length)
	      this.status = "nomore";
	    else this.status = "loading";
	  }, 1000);
	},
    methods: {
		
		search(e){
			this.searchs=e
			this.page=1
			this.product(3)
		},
		store(){
			this.$.ajax(1,"POST","index/store_indexss",{
				store_id:this.id
			},(res)=>{
			  if(res.code==200){
				 
				 	this.store_list = res.data;
					
			  }else{
			     this.$.ti_shi(res.msg);
			  }
			})
		},
		product(i){
			let data={
				store_id:this.id,
				page:this.page,
				pagesize:this.pagesize,
			}
			
			if(i==3){
				data.search=this.searchs
			}

			this.$.ajax(1,"POST","index/store_product",data,(res)=>{
			  if(res.code==200){
				 
				 if(i==1||i==3){
				 	this.product_list = res.data;
				 }else{
				 	 this.product_list = [...this.product_list, ...res.data];
				 }
				 	
					
			  }else{
			     this.$.ti_shi(res.msg);
			  }
			})
		},
		
		
        bay(id) {
            uni.navigateTo({
                url: '/pages/index/ProductDetails?id='+id
            });
        }
    }
};
</script>

<style scoped lang="scss">
/deep/.u-rate {
    display: inline-block !important;
}
.box {
    padding: 32rpx;
    .store {
        padding: 24rpx;
        background: white;
        border-radius: 24rpx;
        margin-top: 30rpx;
    }
    .storeImg {
        width: 96rpx;
        height: 96rpx;
        border-radius: 16rpx;
        margin-right: 16rpx;
    }
    .storeTitle {
        color: #00091a;
        font-size: 32rpx;
        margin-bottom: 8rpx;
    }
    .address {
        width: 48rpx;
        height: 48rpx;
        display: block;
        margin: 0 auto;
    }
    .addressText {
        color: #999ca3;
        font-size: 24rpx;
    }
    .salesVolume {
        color: #999ca3;
        font-size: 28rpx;
    }
    .listBox {
        margin-top: 30rpx;
    }
    .list {
        width: 45%;
        margin: 1%;
        padding: 1.5%;
        background: white;
        border-radius: 16rpx;
        .comimng {
            width: 100%;
        }
        .title {
            margin: 16rpx;
            color: #00091a;
            font-size: 32rpx;
            display: inline-block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: bold;
        }
        .tip {
            font-size: 20rpx;
            color: #3377ff;
            padding: 8rpx;
            border-radius: 8rpx;
            margin-right: 16rpx;
            background: #f7faff;
        }
        .money {
            margin-top: 8rpx;
            color: #ff6401;
            font-size: 20rpx;
            .moneyN {
                font-size: 32rpx;
                font-weight: bold;
            }
        }
        .cost {
            font-size: 24rpx;
            color: #ccced1;
        }
    }
}
</style>
